import VueRouter from 'vue-router'
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'

// 创建路由器
const router = new VueRouter({
    routes: [
        {
            
            path: '/home',
            component: Home,
            meta: {
                title: '首页'
            },
            children: [
                {
                    path: 'news',
                    component: () => import('../pages/News.vue')
                },
                {
                    path: 'message',
                    component: () => import('../pages/Message.vue'),
                    children: [
                        {
                            name: 'xiangqing',// 命名路由, 可以简化跳转路径
                            path: 'detail/:id/:title/:content',
                            // path: 'detail/:id/:title',
                            component: () => import('../pages/Detail.vue'),
                            // meta: {
                            //     isAuth: true,
                            //     title: '消息详情'
                            // },
                            // beforeEnter: (to, from, next) => {
                            //     console.log('beforeEnter')
                            //     next()
                            // }
                            // props第一种写法,
                            // props: (route) => ({id: route.params.id, title: route.params.title, content: route.params.content})
                            // props第二种写法, 所有params参数都会以props的形式传递给Detail组件, 只支持params参数, 不支持query参数
                            props: true

                        }
                    ]
                },
                {
                    name: 'guanyu',
                    path: '',
                    redirect: 'news'
                }
            ]
        },
        {
            path: '/about',
            component: About
        },
        {
            path: '',
            redirect: '/home'
        }
    ]
})

export default router